<template>
	<!-- 精彩图片 -->
	<div class="pictrueBox">
		<div class="pictrueTitle home_title">精彩图片</div>
		<div class="pictrue">
			<div v-for="(item, index) in records">
				<a class="block_a" :href="Path + item.url" target="_blank" v-if="index == 0">
					<div class="pictrueList pictrueList1">
						<img :src="getImgPath((item.extend?.singleImgUpload_banner?item.extend?.singleImgUpload_banner:'') || item.headImag)" alt="" class="img1  mhover pic_width" />
						<p class="ptitle p1 mhover flowHidden">{{ item.title }}</p>
					</div>
				</a>
				<a class="block_a" :href="Path + item.url" target="_blank" v-if="index == 1">
					<div class="pictrueList pictrueList2">
						<img :src="getImgPath((item.extend?.singleImgUpload_banner?item.extend?.singleImgUpload_banner:'') || item.headImag)" alt="" class="img1  mhover pic_width" />
						<p class="ptitle p2 mhover flowHidden">{{ item.title }}</p>
					</div>
				</a>
				<a class="block_a" :href="Path + item.url" target="_blank" v-if="index > 1">
					<div class="pictrueList pictrueList345" :class="'pictrueList' + (index + 1)">
						<img :src="getImgPath((item.extend?.singleImgUpload_banner?item.extend?.singleImgUpload_banner:'') ||item.headImag)" alt="" class="img1  mhover pic_width" />
						<p class="ptitle p3 mhover">
							<span class="span3">{{ item.title }}</span>
						</p>
					</div>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			params: {
				pageSize: 10,
				pageNum: 1
				// typeIdStr: 1001,
			},
			records: [],
			Path: getRootPath()
		};
	},
	created() {},
	mounted() {
		this.headline();
	},
	methods: {
		headline() {
			let prs = {
				pageSize: 5,
				pageNum: 1,
				//channelIdStr: 6615, // 图片栏目
				channelPaths:'pic',
				isTop: true,
				orderBy: 1
			};
			contentApi.fetchContentOfChannel(prs, res => {
				if (res.code == '00000 00000') {
					this.records = res.data.records;
					console.log(this.records, 999999);
				} else {
				}
			});
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style scoped="scoped">
.pictrueBox {
	width: 1200px;
	margin: auto;
	margin-top: 60px;
}
.pictrueBox .pictrueTitle {
	text-align: center;
	height: 30px;
	font-size: 30px;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 30px;
	cursor: pointer;
	position: relative;
}
.pictrueBox .pictrueTitle::after{
	position: absolute;
	width: 82px;
	height: 2px;
	background-color: #EFEFEF;
	left: calc(50% + 84px);;
	top: 15px;
	content: '';
	z-index: 1;
}
.pictrueBox .pictrueTitle::before{
	position: absolute;
	width: 82px;
	height: 2px;
	background-color: #EFEFEF;
	right: calc(50% + 84px);
	top: 15px;
	content: '';
	z-index: 1;
}
.pictrueBox .pictrue {
	margin-top: 24px;
}
.pictrueBox .pictrue .pictrueList {
	position: relative;
	float: left;
}
.pictrueBox .pictrue .ptitle {
	position: absolute;
}
.pictrueBox .pictrue .pictrueList1 {
	width: 792px;
	height: 446px;
	border-radius: 4px;
	overflow: hidden;
}
.pictrueBox .pictrue .pictrueList1 .img1 {
	border-radius: 4px;
	width: auto;
	height: auto;
	margin: auto;
}
.pictrueBox .pictrue .pictrueList1 .img1:hover {
	transform: scale(1.1);
}
.pictrueBox .pictrue .pictrueList1 .p1 {
	margin-left: 117px;
	padding: 24px;
	bottom: 0;
	width: 509px;
	height: 32px;
	text-align: center;
	font-size: 24px;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 32px;
	background: #ffffff;
	opacity: 0.85;
}
.pictrueBox .pictrue .pictrueList2 {
	margin-left: 40px;
	width: 368px;
	height: 446px;
	overflow: hidden;
}
.pictrueBox .pictrue .pictrueList2 .img1 {
	border-radius: 4px;
	width: auto;
	height: auto;
	margin: auto;
	
}
.pictrueBox .pictrue .pictrueList2 .img1:hover {
	transform: scale(1.1);
}
.pictrueBox .pictrue .pictrueList2 .p2 {
	padding: 24px;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	height: 18px;
	font-size: 18px;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 18px;
	height: 172px;
  line-height: 228px;
	box-sizing: border-box;
	background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.78) 51%, rgba(255, 255, 255, 0) 100%);
	z-index:1;
}
.pictrueBox .pictrue .pictrueList345 {
	width: 373px;
	height: 380px;
	margin-top: 40px;
	margin-left: 40px;
	box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.pictrueBox .pictrue .pictrueList345 .img1 {
	border-radius: 4px 4px 0px 0px;
	width: 373px;
	height: 280px;
	margin: auto;
}
.pictrueBox .pictrue .pictrueList345 .img1:hover {
	transform: scale(1.1);
}
.pictrueBox .pictrue .pictrueList345 .p3 {
	padding: 24px;
	bottom: 0;
	font-size: 18px;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 26px;
	border-radius: 0px 0px 4px 4px;
	background-color: #fff;
	
}
.pictrueBox .pictrue .pictrueList345 .p3 .span3 {
	width: 325px;
	height: 52px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	white-space: pre-wrap;
}
.pictrueBox .pictrue .pictrueList345:hover {
	box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.1);
}
.pictrueBox .pictrue .pictrueList3 {
	margin-left: 0;
}
</style>
